<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_元素排序与膨胀收缩</title>
    <style>
        .box{
            background-color: #ff0;
            display: flex;
        }
        .box>div,.ex{
          width: 200px;
          height: 200px;
          border: 2px solid black;
          font-size: 30px;
        }
        .item1{
            order: 3;
            flex-grow: 1;
        }
        .item2{
            order: 4;
            flex-grow: 1;
        }
        .item3{
            order: 2;
        }
        .item4{
            order: 6;
          flex-shrink: 3;
        }
        .item5{
            order: 1;
        }
        .item6{
            order: 5;
          flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="ex">参考大小200px</div>
    <div class="box">
      <div class="item1">01</div>
      <div class="item2">02</div>
      <div class="item3">03</div>
      <div class="item4">04</div>
      <div class="item5">05</div>
      <div class="item6">06</div>
    </div>
</body>
</html>